<template>
	<view class="qilin-box-videoPlayer">
		<video :src="'http://localhost:9999/videos/'+video.src" :controls="false" loop
			id="video" @click="clickVideo" :autoplay="autoplay"
		></video>
	</view>
</template>

<script>
	let Timer=null;
	export default {
		props:["video","index"],
		data(){
			return{
				videoContext:null,//视频上下文
				isPlay:false,//当前视频是否正在播放
				isDblClick:true,//表示当前的点击是否是双击
				autoplay:false,//控制首个视频是否自动播放
			}
		},
		methods:{
			//点击当前视频事件监听
			clickVideo(){
				clearTimeout(Timer);
				this.isDblClick=!this.isDblClick;
				Timer=setTimeout(()=>{
					if(!this.isDblClick){//单击时触发
						if(this.isPlay){
							this.pause();
						}else{
							this.playThis();
						};
					}else{//双击时触发
						// console.log("当前是双击");
						this.$emit("changeDblClick");
					};
					this.isDblClick=true;//充值
				},300);
			},
			//播放当前视频--当上下滑动视频时
			player(){
				if(!this.isPlay){
					this.videoContext.seek(0);//跳转到视频0s处
					this.videoContext.play();//播放视频
					this.isPlay=true;
					this.autoplay=false;//当滑动视频时须暂停首个视频的播放
				};
			},
			//暂停当前视频--当点击视频时
			pause(){
				if(this.isPlay){
					this.videoContext.pause();
					this.isPlay=false;
				};
			},
			//播放当前视频--当点击视频时
			playThis(){
				if(!this.isPlay){
					this.videoContext.play();
					this.isPlay=true;
				};
			}
		},
		mounted(){
			if(this.index===0){
				this.autoplay=true;
				this.isPlay=true;
			};
			this.videoContext=uni.createVideoContext("video",this);
		}
	}
</script>

<style>
.qilin-box-videoPlayer{
	width:100%;
	height:100%;
}
video{
	width:100%;
	height:100%;
}
</style>
